<template>
	<view class="main">
		<!-- 主页背景图 -->
		<view class="indexBg">
			<u-skeleton rows="1" rowsHeight="70vh" :title="false" :loading="skeletonLoading">
				<image src="../../static/indexBg.jpg" mode="aspectFill"></image>
			</u-skeleton>
		</view>

		<!-- 营业信息 -->
		<view class="tradeInfoBox">
			<u-skeleton rows="3" :title="false" rowsHeight="23" :loading="skeletonLoading">
				<view class="infoRow" v-for="(item, index) in tradeInfo" :key="index">
					<u-icon class="icon" :name="item.icon" size="16" color="#f3a73f"></u-icon>
					<text class="title">{{ item.title }} :</text>
					<text class="info">{{ item.info }}</text>
				</view>
			</u-skeleton>
		</view>

		<!-- 公告栏 -->
		<view class="notice">
			<u-skeleton rows="1" rowsHeight="43" :title="false" :loading="skeletonLoading">
				<uni-section title="小花公告" type="line" @click="seeMoreNotice">
					<template v-slot:right>
						<u-icon name="arrow-right" size="15"></u-icon>
					</template>
				</uni-section>
			</u-skeleton>
		</view>

		<!-- 公告栏列表 -->

		<u-skeleton rows="3" rowsHeight="210rpx" :title="false" :loading="skeletonLoading">
			<view class="noticeBox" v-for="(item, index) in noticeList" :key="item._id" @click="seeNoticeDetails(item)">
				<view class="leftBox">
					<image :src="item.picurl" mode="aspectFill"></image>
				</view>
				<view class="rightBox">
					<view class="titleBox">
						<view class="title">
							{{ item.title }}
						</view>
						<view class="date">
							<uni-dateformat :date="item.date" format="yyyy/MM/dd"></uni-dateformat>
						</view>
					</view>
					<view class="infoBox">
						<u-tag :text="`阅读 ${item.read}`" type="success" size="mini" icon="eye" plain></u-tag>
						<u-tag :text="`点赞 ${item.like}`" type="primary" size="mini" icon="thumb-up" plain></u-tag>
					</view>
				</view>
			</view>
		</u-skeleton>

		<!-- <button @click="addNoticeRow">添加公告</button> -->
	</view>
</template>

<script>
export default {
	data() {
		return {
			tradeInfo: [],
			noticeList: [],
			skeletonLoading: true // 是否显示骨架屏组件
		};
	},
	onLoad() {
		this.getTradeInfo();
		this.getNoticeRow3();
	},
	onPullDownRefresh() {
		uni.showLoading({
			title: '数据加载中...',
			mask: true
		});
		this.getNoticeRow3().then((res) => {
			uni.stopPullDownRefresh();
			uni.hideLoading();
		});
	},
	methods: {
		// 查看首页3项公告中的详情
		seeNoticeDetails(item) {
			setTimeout(() => {
				uni.$emit('notice', item);
			}, 300);
			uni.navigateTo({
				url: '/pages/noticeDetails/noticeDetails'
			});
		},
		// 查看更多公告
		seeMoreNotice() {
			uni.navigateTo({
				url: '/pages/moreNotice/moreNotice'
			});
		},
		getNoticeRow3() {
			return new Promise((resolve) => {
				uniCloud
					.callFunction({
						name: 'get_notice_row3'
					})
					.then((res) => {
						this.noticeList = res.result.data;
						this.skeletonLoading = false;
						resolve(true);
					});
			});
		},
		// 获取营业信息
		getTradeInfo() {
			uniCloud
				.callFunction({
					name: 'get_tradeInfo_rows'
				})
				.then((res) => {
					this.tradeInfo = res.result.data;
				});
		}
	}
};
</script>

<style lang="scss">
.main {
	padding-bottom: 29rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;

	.indexBg {
		width: 750rpx;
		height: 70vh;

		image {
			width: 100%;
			height: 70vh;
		}
	}

	.tradeInfoBox {
		width: 600rpx;
		padding: 15rpx;
		box-shadow: 0 0 3rpx #8f939c;
		margin-top: 15rpx;
		border-radius: 10rpx;

		.infoRow {
			padding: 10rpx;
			display: flex;
			align-items: center;

			.icon {
			}

			.title {
				flex: 0 0 100rpx;
				font-size: 26rpx;
				margin: 0 10rpx;
				font-weight: bold;
				white-space: nowrap;
			}

			.info {
				font-size: 24rpx;
				flex: 1 1;
			}
		}
	}

	.notice {
		width: 100%;
		margin: 15rpx;
	}

	.noticeBox {
		width: 720rpx;
		height: 210rpx;
		box-sizing: border-box;
		box-shadow: 0 0 2px #8f939c;
		display: flex;
		margin-bottom: 20rpx;
		border-radius: 20rpx;
		background-color: white;
		overflow: hidden;

		.leftBox {
			flex: 0 0 260rpx;
			height: 100%;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.rightBox {
			color: #8f939c;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			padding: 10rpx;

			.titleBox {
				.title {
					color: #f3a73f;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					font-weight: bold;
					font-size: 28rpx;
				}

				.date {
					font-size: 24rpx;
					text-align: right;
					padding: 10rpx;
				}
			}

			.infoBox {
				display: flex;
				// 匹配小程序
				.u-transition {
					margin-right: 20rpx;
				}
			}
		}
	}
}
</style>
